<template>
  <div class="bckColor">
    <div class="itemOrderNum">
      <span class="orderNum">订单号</span>
      <input class="inp"
             v-model="mOrderNum"
             type="text" name="orderNo"
             @input="orderNumInput"
             placeholder='请输入您的坏卡退资申请订单号' onkeyup="value=value.replace(/[^A-Za-z0-9]/ig,'')">

      <span class="errText">{{ retMsg }}</span>
    </div>
    <span class="detailText">您的订单号为线下网点申请坏卡退资后，系统短信发您的订单编号信息。</span>
    <div class="nextButton">
      <button
        :class="[isDisabledBtn ? 'disabled' : '', 'button']"
        v-on:click="nextClick"
      >
        <div>进度查询</div>
      </button>
    </div>
    <loading :loadingShow="loadingShow"></loading>
  </div>
</template>

<script>
import { badCardQuery } from "../../api/index";
import loading from "./loading/loading";
// import VConsole from "vConsole";

export default {
  data() {
    return {
      isProd: "", //1生产,0测试
      pay3BaseUrl: "", //网络平台3.1根路径
      Authorization: "", //3.1请求的头Authorization
      loadingShow: false, //loading show
      userLoginId: "",
      userMobile: "",
      customerId: "",
      tokenStr: "",
      retMsg: "", //显示错误信息
      isDisabledBtn: true, //按钮是否可用
      mOrderNum: "", //输入的订单号
    };
  },
  components: {
    loading,
  },
  mounted() {
    BmacJSBridge.call("obtainClientBaseUrl", (data) => {
      this.isProd = data.isProd;
      this.pay3BaseUrl = data.pay3BaseUrl;
      this.Authorization = data.Authorization;
      // if (data.isProd == 0) {
      //   var vConsole = new VConsole();
      // }
    });
    BmacJSBridge.call("setTitle", {
      title: "坏卡退资",
    });
    //隐藏返回键
    BmacJSBridge.call("showBackButton", {
      showBack: "1",
    });
    BmacJSBridge.call("hideOptionMenu");
    let timer = setTimeout(() => {
      this.getuserToken();
      this.getBasicInfo();
      clearTimeout(timer);
      timer = null;
    }, 200);
  },
  methods: {
    /**
     * 坏卡订单查询
     */
    orderNumQuery() {
      this.loadingShow = true;
      let request = {
        channelId: "75111023",
        clientType: "Android",
        channelType: "MOB",
        channelCode: "3103",
        merId: "003070000001",
        proof: this.mOrderNum,
        mobileNo: this.userMobile,
        customerId: this.customerId, //客户号
      };

      console.log("坏卡订单查询-请求:", request);

      //调用原生加密数据方法
      BmacJSBridge.call("encryptDataWithRSA3", request, (encryData) => {
        console.log("encryData", encryData);
        console.log("this.tokenStr", this.tokenStr);
        console.log("this.Authorization", this.Authorization);
        this.$ajax({
          method: "post",
          url: this.pay3BaseUrl + `${badCardQuery}`,
          headers: {
            "Content-Type": "application/json",
            Authorization: this.Authorization,
            "wolf-auth": this.tokenStr,
          },
          data: encryData.encryptedData,
        })
          .then((responseData) => {
            console.log("成功", responseData);
            this.loadingShow = false;
            //请求成功  调用原生解密数据方法
           BmacJSBridge.call(
              "decryptDataWithRSA3",
              { decryptParam: responseData.data },
              (decryData) => {
                console.log("解密后数据", decryData);
                let res = decryData.encryptedData;
                // res = JSON.parse(res);
                let dataDic = res.data;

                console.log("坏卡订单查询-响应:", dataDic);

                if (dataDic.retCode == "0000") {
                  if (dataDic.status == "1") {
                    /**
                     * 跳转选择退资渠道页
                     */
                    let mProof = dataDic.proof;
                    this.$router.push({
                      path: "/refundAmtChannel",
                      query: { proof: mProof },
                    });
                  } else {
                    /**
                     * 跳转结果页
                     */
                    this.$router.push({
                      path: "/resultPage",
                      query: { data: dataDic },
                    });
                  }
                } else {
                  this.$toast(dataDic.retMsg);
                }
              }
            );
          })
          .catch((error) => {
            console.log("失败", error);
            this.loadingShow = false;
            console.log(error);
            console.log("HttpCode", error.response.status);
            BmacJSBridge.call(
              "decryptDataWithRSA3",
              { decryptParam: error.response.data },
              (decryData) => {
                let errorRes = decryData.encryptedData;

                if (errorRes.code == 401) {
                  this.$toast(errorRes.msg);
                 BmacJSBridge.call(
                    "startApp",
                    {
                      appId: "00000060",
                      passData: {},
                      popNum: "-1",
                      type:'1',
                      closeCurrentApp: true,
                    },
                    function (result) {
                      // noop
                      BmacJSBridge.call("closePageToHome");
                    }
                  );
                } else {
                  this.$toast("网络开小差");
                }
              }
            );
          });
      });
    },
    orderNumInput() {
      if (this.mOrderNum.length >= 10) {
        this.isDisabledBtn = false;
      } else {
        this.isDisabledBtn = true;
      }
    },
    nextClick() {
      let embedding = {
        eventID: "zlBadCardQuery", //商品ID
        extra: {
          name: "坏卡订单查询",
        },
      };
      BmacJSBridge.call("AddEventburyPoints", embedding, (data) => {});
      if (this.isDisabledBtn) {
        return;
      }

      this.orderNumQuery();
    },
    /**
     * 检查是否登录
     */
    getuserToken() {
      console.log("getuserToken");
      BmacJSBridge.call(
        "getAPDataStorage",
        {
          //获取登录信息
          type: "common",
          business: "userInfoGrid",
          key: "userInfo",
        },
        (result) => {
          console.log("result", result);
          if (result.error == "11" && result.errorMessage == "未找到该数据") {
            //未登录跳转登录
            console.log("退出登录");
            this.jumpToLogin();
          } else {
            let userInfo = JSON.parse(result.data).data;
            this.userInfo = userInfo;
            this.customerId = userInfo.customerId;
            this.userLoginId = userInfo.logonIds;
            this.userMobile = userInfo.mobileNo;
            this.tokenStr = userInfo.token_type + " " + userInfo.access_token;
            this.userIsAuthStt = userInfo.userIsAuthStt;
            console.log("检查登录", userInfo);
          }
        }
      );
    },
    /**
     * 获取基本信息
     */
    getBasicInfo() {
      console.log("获取基本信息");
      BmacJSBridge.call("getBasicInfo", {}, (data) => {
        console.log("获取基本信息data", data);
        let phoneData = data.deviceData;
        this.clientIp = phoneData.clientIp;
        this.terminalIp = phoneData.terminalIp;
        this.terminalMac = phoneData.terminalMac;
        this.imei = phoneData.imei;
        this.appVersion = phoneData.version;
        this.mobileType = phoneData.mobileType;
      });
    },
    /**
     * 跳转登录
     */
    jumpToLogin() {
      BmacJSBridge.call(
        "startApp",
        {
          appId: "00000060",
          type:'1',
          closeCurrentApp: true,
        },
        (result) => {
          // noop
        }
      );
    },
  },
};
</script>

<style lang="css" scoped>
* {
  box-sizing: border-box;
}

.bckColor {
  width: 100%;
  height: 100%;
  background: #e5e5e5;
  padding: 16px 16px 30px 16px;
}

.itemOrderNum {
  width: 100%;
  height: 152px;
  background: #ffffff;
  border-radius: 4px;
  padding-top: 16px;
  padding-left: 16px;
}

.orderNum {
  /* width: 51px; */
  height: 20px;
  /* Regular/Font Size - 17 */

  font-size: 17px;
  line-height: 20px;
  /* identical to box height, or 118% */

  display: flex;
  align-items: center;

  /* 333333 */

  color: #333333;
}

.inp {
  width: 100%;
  height: 60px;
  box-shadow: inset 0px -0.5px 0px #e6e6e6;
  /*background: #008DEE;*/
  background: #ffffff;
  font-size: 16px;
}

.errText {
  width: 311px;
  height: 12px;
  margin-top: 16px;
  /* Regular/Font Size - 12 */
  font-size: 12px;
  line-height: 12px;
  /* identical to box height, or 100% */
  display: flex;
  align-items: center;
  /* FF4747 */
  color: #ff4747;
}

.detailText {
  width: auto;
  height: 36px;
  margin-top: 8px;
  font-size: 12px;
  line-height: 18px;
  color: #999999;
  text-align: left;
  display: inline-block;
}

.nextButton {
  width: 100%;
  height: 44px;
  margin-top: 16px;
}

.disabled {
  width: 100%;
  height: 100%;
  background: #cccccc !important;
  border: 4px solid #cccccc;
  border-radius: 4px;
}

.button {
  width: 100%;
  height: 100%;
  background: #008dee;
  border: none;
  font-size: 17px;
  outline: none;
  color: #ffffff;
  letter-spacing: 0;
  text-align: center;
  border-radius: 4px;
}
</style>
